import React, {Component} from 'react'

import {View} from "@tarojs/components";
import PropsType from "prop-types"

import * as echarts from "../ec-canvas/echarts.js"

class Echarts extends Component{
  static defaultProps = {
    setChartOption:null
  }
  constructor(props) {
    super(props);
    this.state = {
      ec: {
        onInit: this.initChart.bind(this)
      }
    }
  }
  static propsType = {
    setChartOption: PropsType.func
  }


  initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);

    // var option = {
    //   backgroundColor: "#ffffff",
    //   color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
    //   series: [{
    //     label: {
    //       normal: {
    //         fontSize: 14
    //       }
    //     },
    //     type: 'pie',
    //     center: ['50%', '50%'],
    //     radius: ['40%', '60%'],
    //     data: [{
    //       value: 55,
    //       name: '北京'
    //     }, {
    //       value: 20,
    //       name: '武汉'
    //     }, {
    //       value: 10,
    //       name: '杭州'
    //     }, {
    //       value: 20,
    //       name: '广州'
    //     }, {
    //       value: 38,
    //       name: '上海'
    //     }]
    //   }]
    // };
    // chart.setOption(option);
    this.props.setChartOption(chart)
    return chart;
  }
  render() {
    return(
      <View className='container'>
        <View className='echarsTitle' >{this.props.title}</View>
        <ec-canvas ec={this.state.ec} />
      </View>
    )
  }
}
export default Echarts
